<template>
  <view class="video-popup-container" v-if="showViewer">
    <view class="back-btn" @click="closeVideo">
      <uni-icons type="left" size="20" color="#ffffff"></uni-icons>
    </view>


    <!-- 视频组件 -->
    <video id="videoPlayer" ref="videoPlayer" class="video-player" :src="videoUrl" :autoplay="true" :loop="false"
      :controls="false" @play="handlePlay" @pause="handlePause" @timeupdate="handleTimeUpdate" @ended="handleEnded"
      @tap="togglePlay"></video>
    <!-- 控制层 -->
    <view class="control-layer" v-if="showControl">
      <!-- 暂停/播放按钮 -->
      <image class="play-pause-btn" :src="getFullImageUrl('@/static/faxian/bofan.png',playStatus ? pauseIcon : playIcon)" @tap="togglePlay" style="width: 143.4rpx;height: 181.7rpx;"></image>
    </view>
    <!-- 进度条和时长 -->
    <view class="progress-container">
      <text class="current-time">{{ formatTime(currentTime) }}</text>
      <view class="progress-bar-container" @touchstart="startDrag" @touchmove="dragging" @touchend="endDrag">
        <view class="progress-bar">
          <view class="progress-track" :style="{ width: progressWidth }"></view>
          <view class="progress-handle" :style="{ left: progressWidth }"></view>
        </view>
      </view>
      <text class="total-time">{{ formatTime(duration) }}</text>
    </view>
  </view>
</template>

<script>
import {getFullImageUrl } from '../../utils/request';
export default {
  props: {
    videoUrl: {
      type: String,
      required: true
    },
    showViewer: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      playStatus: false, // 播放状态，true为播放，false为暂停
      playIcon: '/static/play.png', // 播放图标，需自行准备
      pauseIcon: '/static/pause.png', // 暂停图标，需自行准备
      showControl: true, // 是否显示控制层
      currentTime: 0, // 当前播放时间
      duration: 0, // 视频总时长
      progressWidth: '0%', // 进度条宽度
      isDragging: false, // 是否正在拖动进度条
    };
  },
  watch: {
    showViewer(newVal) {
      if (newVal) {
        // 当显示时可以做一些初始化操作
        this.$nextTick(() => {
          this.playVideo();
        });
      } else {
        // 当隐藏时可以做一些清理操作
        this.pauseVideo();
      }
    }
  },
  onReady() {
    this.videoContext = uni.createVideoContext('videoPlayer', this);
  },
  methods: {
    getFullImageUrl,
    // 关闭视频
    closeVideo() {
      this.$emit('update:showViewer', false);
      // 发送自定义事件，通知父组件视频已关闭
      this.$emit('videoClosed');
    },
    // 切换播放暂停
    togglePlay() {
      if (this.playStatus) {
        this.pauseVideo();
      } else {
        this.playVideo();
      }
    },
    // 播放视频
    playVideo() {
      this.videoContext.play();
    },
    // 暂停视频
    pauseVideo() {
      this.videoContext.pause();
    },
    // 处理播放事件
    handlePlay() {
      this.playStatus = true;
      this.showControl = false; // 播放时隐藏控制层
    },
    // 处理暂停事件
    handlePause() {
      this.playStatus = false;
      this.showControl = true; // 暂停时显示控制层
    },
    // 处理视频结束事件
    handleEnded() {
      this.playStatus = false;
      this.currentTime = 0;
      this.progressWidth = '0%';
      this.showControl = true; // 视频结束时显示控制层
    },
    // 时间更新事件
    handleTimeUpdate(e) {
      if (!this.isDragging) {
        this.currentTime = e.detail.currentTime;
        this.duration = e.detail.duration;
        const progress = (this.currentTime / this.duration) * 100;
        this.progressWidth = progress + '%';
      }
    },

    // 开始拖动进度条
    startDrag(e) {
      this.isDragging = true;
      this.calculateProgress(e);
    },

    // 拖动进度条中
    dragging(e) {
      if (this.isDragging) {
        this.calculateProgress(e);
      }
    },

    // 结束拖动进度条
    endDrag() {
      if (this.isDragging) {
        this.isDragging = false;
        // 跳转到指定时间
        this.videoContext.seek(this.currentTime);
      }
    },

    // 计算进度条位置
    calculateProgress(e) {
      const progressBar = uni.createSelectorQuery().in(this).select('.progress-bar');
      progressBar.boundingClientRect(rect => {
        if (rect) {
          const touch = e.touches[0];
          const offsetX = touch.clientX - rect.left;
          const progress = (offsetX / rect.width) * 100;
          this.progressWidth = Math.max(0, Math.min(100, progress)) + '%';
          this.currentTime = (progress / 100) * this.duration;
        }
      }).exec();
    },
    // 格式化时间
    formatTime(seconds) {
      if (isNaN(seconds) || seconds === 0) {
        return '00:00';
      }
      const minutes = Math.floor(seconds / 60);
      const secs = Math.floor(seconds % 60);
      return (
        (minutes < 10 ? '0' + minutes : minutes) +
        ':' +
        (secs < 10 ? '0' + secs : secs)
      );
    },
  },
};
</script>

<style lang="scss" scoped>
.video-popup-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  background-color: #000000;
  z-index: 99999; /* 更高的z-index确保覆盖tabbar */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* 确保覆盖所有其他元素 */
  pointer-events: auto;
  /* 添加额外的样式确保覆盖tabbar */
  transform: translateZ(0);
}

/* 添加一个额外的遮罩层，确保完全覆盖tabbar */
.video-popup-container::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #000000;
  z-index: -1;
  pointer-events: none;
}

.back-btn {
  position: absolute;
  top: 100rpx;
  left: 30rpx;
  width: 60rpx;
  height: 60rpx;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
}

.video-player {
  width: 100%;
  height: 100%;
  flex: 1;
  object-fit: cover; /* 确保视频内容覆盖整个容器 */
  background-color: #000000; /* 添加黑色背景 */
}

.control-layer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;

  .play-pause-btn {
    width: 160rpx;
    height: 160rpx;
    opacity: 0.8;
  }
}

.progress-container {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100rpx; /* 调整底部位置，确保在tabbar之上 */
  padding: 0 40rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 1000; /* 确保进度条在覆盖层之上 */
  pointer-events: auto; /* 确保进度条可交互 */

  .current-time,
  .total-time {
    color: #fff;
    font-size: 28rpx;
    width: 80rpx;
  }

  .progress-bar-container {
    flex: 1;
    margin: 0 20rpx;

    .progress-bar {
      width: 100%;
      height: 10rpx;
      background-color: rgba(255, 255, 255, 0.3);
      border-radius: 5rpx;
      position: relative;

      .progress-track {
        height: 100%;
        background-color: #BEFF32;
        border-radius: 5rpx;
      }

      .progress-handle {
        position: absolute;
        width: 30rpx;
        height: 30rpx;
        background-color: #BEFF32;
        border-radius: 50%;
        top: 50%;
        transform: translateY(-50%);
        margin-left: -15rpx;
        box-shadow: 0 0 15rpx 10rpx rgba(188, 255, 45, 0.5);
        z-index: 10;
      }
    }
  }
}
</style>